import { useMemoizedFn } from 'ahooks';
import { Radio, RadioChangeEvent } from 'antd';
import { useMemo, useState } from 'react';
import Demo1 from './Demo1';
import Demo2 from './Demo2';

export default function Terrain() {
    const [value, setValue] = useState(1);
    const onChange = useMemoizedFn((e: RadioChangeEvent) => {
        setValue(e.target.value);
    });

    const Com = useMemo(() => {
        switch (value) {
            case 1:
                return <Demo1 />;
            case 2:
                return <Demo2 />;
        }
        return <Demo1 />;
    }, [value]);

    return (
        <>
            <div
                style={{
                    position: 'absolute',
                    top: '10px',
                    left: '10px',
                }}
            >
                <Radio.Group value={value} buttonStyle="solid" onChange={onChange}>
                    <Radio.Button value={1}>微软</Radio.Button>
                    <Radio.Button value={2}>恒歌</Radio.Button>
                </Radio.Group>
            </div>
            {Com}
        </>
    );
}
